﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserSignUp.ascx.cs"
    Inherits="IMDB.UserControls.UserSignUp" %>
<script>
    $(document).ready(function () {
        $('#username').focus();
    });
</script>
<script>
    $(document).ready(function () {
        var validationFields = $('#username, #password, #email');

        validationFields.bind('change keydown paste', function (event) {
            var field = $(this);

            if (field.data('validationTimeout') != undefined) {
                clearTimeout(field.data('validationTimeout'));
            }

            field.data('validationTimeout', setTimeout(function () {
                if (field.val() || field.hasClass('input-validation-error') || field.hasClass('input-validation-success')) {
                    validateField(field);
                }
            }, 400));
        });

        $('form[action="/signup"]').submit(function (event) {
            if (validating) {
                submitting = true;
                return false;
            }

            // If there are any fields without a success state, stop the submission.
            if ($(this).find('.input-validation-success').length != validationFields.length) {
                // Find and validate any fields that haven't been validated yet.
                var needValidation = validationFields.filter(':not(.input-validation-error):not(.input-validation-success)');

                if (needValidation.length) {
                    submitting = true;

                    needValidation.each(function () {
                        validateField($(this));
                    });
                }

                return false;
            }
            else {
                var f = $(this).unbind('submit');
                f.find('input[type="submit"]').attr('disabled', true);
                trackSignUp('Woot');
                window.setTimeout(function () { f.submit(); }, 1000);

                return false;
            }
        });
    });
</script>
<div class="clearfix" id="header">
    <h1>
        <a class="logo" href="/">IMDB</a></h1>
    <div id="login">
        <div id="loggedOut">
            <div id="loginLink">
                <h4>
                    <a href="/login">Log in</a></h4>
                <p>
                    Hi are you new? <a href="/signup">Sign up</a>.</p>
            </div>
        </div>
    </div>
</div>
<div class="leadIn">
    <h2>
        A couple of things we need...</h2>
</div>
<div class="contentWrapper">
    <div class="contentContainer clearfix">
        <div class="arrow">
        </div>
        <div class="mainContent clearfix">
            <div class="primaryContent">
                <div class="section">
                    <h3>
                        so, who are you?</h3>
                    <form action="/signup" method="post">
                    <fieldset>
                        <dl>
                            <dt>
                                <label for="username">
                                    username</label></dt>
                            <dd>
                                <input autocomplete="off" class="text" id="username" name="username" type="text"
                                    value="" />
                                <label for="username" id="error_username_text" class="form_error form_error_text ">
                                </label>
                            </dd>
                            <dt>
                                <label for="password">
                                    password</label></dt>
                            <dd>
                                <input autocomplete="off" class="text" id="password" name="password" type="password" />
                                <label for="password" id="error_password_text" class="form_error form_error_text ">
                                </label>
                            </dd>
                            <dt>
                                <label for="email">
                                    email</label></dt>
                            <dd>
                                <input autocomplete="off" class="text" id="email" name="email" type="text" value="" />
                                <label for="email" id="error_email_text" class="form_error form_error_text ">
                                </label>
                            </dd>
                            <dt></dt>
                            <dd class="checkbox">
                                <input checked="checked" id="newsletter" name="newsletter" type="checkbox" value="true" /><input
                                    name="newsletter" type="hidden" value="false" />
                                <label for="newsletter">
                                    <em>newsletter?</em> we’ll occasionally email you news about the site</label>
                            </dd>
                            <dt></dt>
                            <dd>
                                Signing up means you agree to the <a href="http://www.woot.com/user/privacynotice.aspx"
                                    target="_blank">privacy policy</a>
                            </dd>
                            <dt></dt>
                            <dd>
                                <input class="button" type="submit" value="sign up" /></dd>
                        </dl>
                    </fieldset>
                    </form>
                </div>
                <style type="text/css">
                    .provider
                    {
                        display: none;
                    }
                    
                    .providers
                    {
                        padding-bottom: 5px;
                    }
                    
                    #third-party ul li
                    {
                        float: left;
                        list-style: none;
                        padding: 0 0 0 10px;
                    }
                    
                    #third-party ul li a
                    {
                        display: block;
                        height: 54px;
                        width: 85px;
                    }
                    
                    #third-party ul li a img
                    {
                        border: 2px solid #CCC;
                    }
                    
                    #third-party ul li a:hover img
                    {
                        border: 2px solid #999;
                    }
                    
                    #third-party ul li.selected a img
                    {
                        border: 2px solid #61861E;
                    }
                </style>
                <script type="text/javascript">
                    function login(openID) {
                        $('#openid').val(openID);
                        $('.provider.openid form').submit();
                    }

                    function showProvider(provider) {
                        $('.providers').hide();
                        $('.provider.' + provider).show();
                        $('.provider.' + provider + ' input.text').focus();
                    }

                    function showProviders() {
                        $('.provider').hide();
                        $('.providers').show();
                    }
                </script>
                <div class="section" id="third-party">
                    <div class="providers">
                        <h3>
                            or log in using your account with</h3>
                        <ul>
                            <li><a href="javascript:login('https://www.google.com/accounts/o8/id');">
                                <img src="/Images/Connections/google.png" alt="Google" /></a></li>
                            <li><a href="javascript:login('http://yahoo.com');">
                                <img src="/Images/Connections/yahoo.png" alt="Yahoo" /></a></li>
                            <li><a href="https://www.facebook.com/login.php?api_key=96a4f6e52f4e4a332462297b89d043d7&amp;extern=1&amp;fbconnect=1&amp;return_session=1&amp;v=1.0&amp;next=https://account.woot.com/facebook/authenticate&amp;fb_connect=1&amp;cancel_url=https://account.woot.com/login"
                                target="_parent">
                                <img src="/Images/Connections/facebook.png" alt="Facebook" /></a></li>
                            <li><a href="/twitter/authenticate" target="_parent">
                                <img src="/Images/Connections/twitter.png" alt="Twitter" /></a></li>
                            <li><a href="javascript:showProvider('aol');">
                                <img src="/Images/Connections/aol.png" alt="AOL" /></a></li>
                            <li><a href="javascript:showProvider('openid');">
                                <img src="/Images/Connections/openid.png" alt="OpenID" /></a></li>
                        </ul>
                    </div>
                    <div class="provider aol">
                        <h3>
                            Enter your information and we’ll send you to AOL to finish up</h3>
                        <form action="/openid/authenticate" method="post" onsubmit="$('.provider.aol input[name=&quot;openid&quot;]').val('http://openid.aol.com/' + $('#aol').val());"
                        target="_parent">
                        <fieldset>
                            <dl>
                                <dt>
                                    <label for="aol">
                                        AOL screen name</label></dt>
                                <dd>
                                    <input id="aol" class="text aol" name="aol" type="text" /></dd>
                                <dt></dt>
                                <dd>
                                    <input class="button" type="submit" value="log in" />
                                    <input class="button" onclick="javascript:showProviders();" type="reset" value="cancel" />
                                </dd>
                            </dl>
                            <input name="openid" type="hidden" />
                        </fieldset>
                        </form>
                    </div>
                    <div class="provider openid">
                        <h3>
                            Enter your OpenID URL</h3>
                        <form action="/openid/authenticate" method="post" target="_parent">
                        <fieldset>
                            <dl>
                                <dt>
                                    <label for="openid">
                                        OpenID</label></dt>
                                <dd>
                                    <input class="text openid" id="openid" name="openid" type="text" /></dd>
                                <dt></dt>
                                <dd>
                                    <input class="button" type="submit" value="log in" />
                                    <input class="button" onclick="javascript:showProviders();" type="reset" value="cancel" />
                                </dd>
                            </dl>
                        </fieldset>
                        </form>
                    </div>
                </div>
            </div>
            <div class="secondaryContent">
                <h3>
                    Already have a IMDB account?</h3>
                <p>
                    Well then, you're in the wrong place. <a href="/login">Log in</a>.</p>
            </div>
        </div>
    </div>
</div>
